<template>
	<view style="background-color: #F5F5F5;min-height: 90vh;width: 750rpx;position: relative;overflow:hidden;">
		<!-- 定位+消息 -->
		<view class="location_message flex-r-b-c">
			<view class="position flex-r-s-c" @click="store_show=true">
				<image src="../../../static/icon/position.png" style="height: 30px;" mode="heightFix"></image>
				<view class="position_text">
					<view class="position_text1 flex-r-s-c">{{store_obj.name}}
						<image src="/static/icon/rightArrow.png" style="height: 10px;margin-left: 5px;"
							mode="heightFix"></image>
					</view>
					<text>距离{{store_obj.distance}}km</text>
				</view>
			</view>
			<view class="flex-r-a-c" @click="mobile_fn()">
				<image src="/static/icon/phone.png" mode="heightFix" style="height:12px;"></image>
				<text style="color:#999999;font-size:12px;">{{store_obj.mobile}}</text>
			</view>
		</view>
		<!-- 选择栏 -->
		<view class="flex-r-b-c" style="background-color: #FFFFFF;height:91px;width:750rpx;">
			<!-- <scroll-view scroll-x="true" :scroll-left="scrollViewXjl" style="background-color: #FFFFFF;height:91px;box-sizing: border-box;white-space: nowrap;width:710rpx;"> -->
			<view class="flex-r-b-c" style="background-color: #FFFFFF;height:91px;width:750rpx;">
				<view v-for="(v,i) in list" :key='i' style="display: inline-block;margin-left: 5px;">
					<picker @change="bindPickerChange" :value="index" :range="v.secondary" range-key="sname"
						:disabled='fn_disabled(v.secondary)'>
						<view class="flex-c-c-c" @click="active_fl_fn(i,v)"
							style="border-width: 1rpx;background-color: #FFFFFF; width: 125px;height:91px;border-radius: 6px;border-style: solid;position: relative;"
							:style="{borderColor:active_fl!==null?(active===i?'#45806E':'#FFF'):'#FFF',zIndex:active===i?'10000':'99',borderBottomRightRadius: active_fl!==null?(active===i?'6px':'0px'):'0px',borderBottomLeftRadius: active_fl!==null?(active===i?'6px':'0px'):'0px'}">
							<image :src="base.imgUrl+v.img" mode="widthFix" style="width:56px;border-radius: 5rpx;">
							</image>
							<view class="one-line-ellipsis" style="width: 125rpx;text-align: center;"
								:style="{color:active===i?'#45806E':'#4B4B4B',fontSize:active===i?'18px':'16px'}">
								{{active_fl!==null?(active===i?is_fl_active?v.name:list[zz_active_fl.active].secondary[zz_active_fl.active_fl].sname:v.name):v.name}}
							</view>
						</view>
					</picker>
				</view>
			</view>
			<!-- </scroll-view> -->
			<!-- <view class="flex-c-c-c" style="height: 61px;width: 40rpx;background-color: #EAEAEA;border-radius: 5rpx;">
				<u-icon name="arrow-right" color="#FFF" size="50"></u-icon>
			</view> -->
		</view>
		<!-- 选择技师——选择时间 -->
		<view class="flex-c-c-c" style="padding:15px 10px;"
			:style="{paddingBottom:time_active_obj.time_active!=null?'120rpx':'0rpx'}">
			<view class="felx-c-c-c" style="width: 650rpx;height: auto;">
				<!-- 选择栏 -->
				<view class="flex-r-b-s"
					style="width:650rpx;height: 45px;align-items: flex-end!important;position: relative;">
					<view @click="active1=1" :class="[active1===1?'active1':'active3','flex-c-c-c']">
						<text>选择技师</text>

					</view>
					<view @click="qiehuan();timeList(active_time)"
						:class="[active1===2?'active2':'active','flex-c-c-c']">
						<text>选择时间</text>

					</view>
					<view
						style="position:absolute;bottom: 0;left: 30px;width: 550rpx;background-color:#FFFFFF;z-index: 88;height:20px;">
					</view>
				</view>
				<!-- 技师内容 -->
				<view class="flex-r-b-c"
					style="width: 650rpx;height: auto;background-color:#FFFFFF;flex-wrap:wrap!important;border-bottom-left-radius: 6px;border-bottom-right-radius: 6px;padding: 20rpx 18rpx;"
					v-if="active1===1">
					<view class="flex-c-c-c views_js" v-for="(v,i) in arr" :key='i'
						:style="{borderWidth:active_arr===i?'2rpx':'0px'}">
						<view class="flex-r-s-c views_js2" :class="[active_arr===i?'views_js_active':'']"
							@click="xuanzejishi(i)">
							<view class="flex-c-c-c"
								style="width: 114rpx;height: 114rpx;border-radius: 50%;margin-left: 5px;">
								<image :src="base.imgUrl+v.timg" mode="aspectFill"
									style="width: 114rpx;height: 114rpx;border-radius: 50%;"></image>
							</view>
							<view class="flex-c-b-s" style="margin-left: 5px;height: 114rpx;">
								<text style="color: #4B4B4B;font-size: 13px;">{{v.name}}</text>
								<text style="color: #555555;font-size: 11px;">好评率：{{v.praise}}%</text>
								<view class="flex-c-c-c" @click.stop="technician(v.id)"
									style="height: 15px;width: 38px;border: 1px solid #B7B7B7;border-radius: 2px;">
									<text style="color: #555555;font-size: 9px;">详情</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 选择时间 -->
				<view class="flex-r-c-c"
					style="width: 100%;height: auto;background-color:#FFFFFF;border-bottom-left-radius: 6px;border-bottom-right-radius: 6px;"
					v-if="active1===2">
					<!-- 选择今天明天后天 -->
					<view class="flex-c-c-c" v-for="(v,i) in item_list" :key='i'
						:style="{borderWidth:active_time===i?'1px':'0px'}">
						<view class="flex-c-c-c active_time" @click="active_time=i;timeList(i)">
							<text style="color: #4B4B4B;font-size: 14px;">{{v.text}}</text>
							<text style="color: #4B4B4B;font-size: 12px;padding-bottom:3px;"
								:class="[active_time===i?'active_time1':'']">{{v.time}}</text>
						</view>
					</view>
				</view>
				<!-- 其他 -->
				<view class="flex-c-s-s" v-if="active1===2">
					<view v-for="index in 2" :key='index' style="width: 100%;"
						v-if="item_list[active_time].morning_arr.length!=0||item_list[active_time].afternoon_arr.length!=0">
						<view class="flex-r-s-c title">
							<view></view>
							<text>{{index==0?'上午预约':'下午预约'}}</text>
						</view>
						<view class="flex-r-b-s time_list"
							v-if="index==0?item_list[active_time].morning_arr.length==0?false:true:item_list[active_time].afternoon_arr.length==0?false:true">
							<view class="time_list_view flex-c-c-c"
								v-for="(v,i) in index==0? item_list[active_time].morning_arr:item_list[active_time].afternoon_arr"
								:key="i" :style="{backgroundColor:v.type!=1?'#EAEAEA':(time_active_obj.time_active==active_time&&time_active_obj.time==v.time?'#45806E':'#FFFFFF'),
						color:time_active_obj.time_active==active_time&&time_active_obj.time==v.time?'#FFFFFF':'#4A4A4A',
						borderWidth:v.type!=1?'2rpx':'0rpx',width:v.type!=1?'146rpx':'150rpx',height:v.type!=1?'70rpx':'74rpx'}"
								@click="time_active_obj={time_active:v.type==1?active_time:null,time:v.type==1?v.time:null}">
								<text
									:style="{color:time_active_obj.time_active==active_time&&time_active_obj.time==v.time?'#FFFFFF':'#4A4A4A'}">{{v.time}}</text>
								<view class="is_time flex-c-c-c" v-if="v.type!=1"
									:style="{width:v.type==3?'52rpx':'72rpx'}">
									<text>{{v.type==3?'已满':'未排班'}}</text>
								</view>
							</view>
						</view>
						<view class="flex-c-c-c" v-else
							style="color: #4B4B4B;font-size: 32rpx;height: 100rpx;width: 100%;">
							该技师{{index==0?'上午':'下午'}}没有排班
						</view>
					</view>
					<view class="flex-c-c-c" style="color: #4B4B4B;font-size: 32rpx;height: 100rpx;width: 100%;"
						v-if="item_list[active_time].morning_arr.length==0&&item_list[active_time].afternoon_arr.length==0">
						该技师当天没有排班
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_gwc flex-r-a-c" v-if="time_active_obj.time_active!=null">
			<view class="flex-r-a-c bottom_gwcs">
				<view class="text1 flex-r-s-c">
					<text
						class="time_text">{{item_list[time_active_obj.time_active].text}}{{time_active_obj.time}}</text>
					<text class="sc_text">服务时间约90分钟</text>
				</view>
				<view class="text_btn flex-c-c-c" @click="item_fn_true()">
					确定
				</view>
			</view>
		</view>
		<!-- 地址选择 -->
		<u-popup v-model="store_show" mode="bottom" border-radius="50" width="100vw" height="1030rpx">
			<view class="flex-r-b-c" style="width: 100%;height:110rpx;padding: 0px 16px;">
				<text style="color: #333333;font-size: 18px;font-weight: bold;">选择门店</text>
				<!-- <text @click="store_true()" style="color: #333333;font-size: 15px;">确定</text> -->
			</view>
			<view style="width:100%;height:76rpx;margin-bottom: 24rpx;" class="flex-c-c-c">
				<view class="flex-r-b-c" style="width:686rpx;height:76rpx;">
					<view class="flex-r-s-c" style="width: 528rpx;height:76rpx;">
						<u-search style="width: 100%;" placeholder="请输入门店名称" :show-action="false"
							v-model="store_obj_api.seach"></u-search>
					</view>
					<view class="flex-c-c-c"
						style="width: 130rpx;height: 62rpx;border-radius:8rpx;background-color: #45806E;">
						<text style="font-size: 28rpx;color: #FFFFFF;" @click="store_list_fn()">搜索</text>
					</view>
				</view>
			</view>
			<scroll-view scroll-y="true" style="height:800rpx;" @scrolltolower='store_lists()' lower-threshold='50'>
				<view style="padding: 0px 6px;">
					<view class="flex-r-b-c"
						style="height:117px;width: 726rpx;border-color: #45806E;border-radius: 10px;border-style: solid;padding: 0px 6px;"
						v-for="(v,i) in store_list" :key='i' @click="store_active=i;store_true(v)"
						:style="{borderWidth:store_active===i?'3rpx':'0px',padding:store_active===i?'0px 5px':'0px',boxShadow:store_active===i?'0px 3px 3px rgba(69, 128, 110, 0.22)':'none'}">
						<view class="flex-r-s-c" style="width:550rpx;">
							<view class="flex-c-c-c"
								style="width: 250rpx;height: 98px;box-shadow: 0px 3px 3px rgba(69, 128, 110, 0.22);border-radius: 6px;background-color: #FFFFFF;overflow: hidden;">
								<image :src="base.imgUrl+v.image" mode="widthFix"
									style="width: 250rpx;border-radius: 6px;">
								</image>
							</view>
							<view class="flex-c-b-s" style="height: 98px;margin-left: 30rpx;width: 250rpx;">
								<text class="one-line-ellipsis">{{v.name}}</text>
								<view class="flex-r-s-c">
									<image src="../../../static/icon/store.png" mode="widthFix" style="width: 11px;">
									</image>
									<text style="color: #999999;font-size: 12px;margin-left: 5px;">{{v.area}}</text>
								</view>
								<view class="flex-r-s-c">
									<image src="../../../static/icon/phone.png" mode="widthFix" style="width: 11px;">
									</image>
									<text style="color: #999999;font-size: 12px;margin-left: 5px;">{{v.mobile}}</text>
								</view>
								<text class="one-line-ellipsis"
									style="font-size: 12px;color: #5D5D5D;width: 100%;">{{v.address}}</text>
							</view>
						</view>
						<view class="flex-c-b-e" style="height: 98px;width: 150rpx;">
							<view class="flex-r-s-c">
								<image src="../../../static/icon/position1.png" mode="widthFix" style="width: 9px;">
								</image>
								<text style="color: #0F4C3A;font-size: 12px;margin-left: 5px;">{{v.distance}}km</text>
							</view>
							<u-button type="success " @click.stop="store_details_jump(v.id)"
								:custom-style="{backgroundColor: '#45806E',height:' 30px',width: '65px',marginBottom:' 23px',fontSize:'14px'}">
								详 情</u-button>
						</view>
					</view>
				</view>
				<view class="flex-c-c-c" style="height: 50rpx;">
					<text>{{store_list_text}}</text>
				</view>
			</scroll-view>
		</u-popup>
		<!-- 底部tabbar，组件内存在占位view最好放html最底部 -->
		<tabber :active='1'></tabber>
	</view>
</template>

<script>
	import tabber from '../../../components/tabbar.vue'
	export default {
		components: {
			tabber
		},
		data() {
			return {
				store_obj: {}, //门店基础信息
				base: this.$base,
				message_show: true, //是否显示消息小红点
				active: null, //当前选择
				active_fl: null, //当前选择
				zz_active_fl: { //最终选中
					active: null,
					active_fl: null
				},
				active_arr: null, //技师选中下标
				active1: 1, //当前选择-----1===技师，2===时间
				store_obj_api: { //门店列表
					num: 10,
					page: 0 //请求页数
				},
				store_show: !uni.getStorageSync('user_info'), //门店弹框显示否
				store_keyword: '', //门店搜索框
				store_active: 0, //门店或搜索后的选择门店下标
				store_list: [],
				zz_store_obj: uni.getStorageSync('store_dz'), //门店最终选择
				// 选择框
				list: [],
				order_array: {}, //服务临时滑动选择
				scrollViewXjl: 0,
				index: 0, //滑动选择的下标	
				order_arrayorder_array: null,
				arr: [],
				time_active_obj: {
					time_active: null, //最终选中的日期
					time: null //最终选中的时间段
				},
				item_list: [{ //时间假数据
						time: this.GetDateStr(0),
						text: '今天',
						morning_arr: [],
						afternoon_arr: []
					},
					{
						time: this.GetDateStr(1),
						text: '明天',
						morning_arr: [],
						afternoon_arr: []
					}, {
						time: this.GetDateStr(2),
						text: '后天',
						morning_arr: [],
						afternoon_arr: []
					}
				],
				active_time: 0
			}
		},
		onShow() {
			// 引用tabbar的页面隐藏自带tabbar,不改变四个tabbar的权重
			uni.hideTabBar()
			this.store()
			this.serviceList()
			this.technicianList()
			this.timeList(this.active_time)
		},
		onLoad() {
			uni.setStorage({
				key: 'isTabBarOrder',
				data: true,
			})
			this.store_obj_api = {
				...this.store_obj_api,
				seach: null,
				...uni.getStorageSync('store')
			}
			this.store_lists() //加载第一页
			uni.$on('tabOrder', el => {
				if (el.fwId) {
					this.list.forEach((item, index) => {
						item.secondary.forEach((res, resIndex) => {
							if (res.id == el.fwId) {
								this.active = index;
								this.scrollViewXjl = 125 + index + 1 * 5 - 125
								this.active_fl = resIndex
								this.zz_active_fl = {
									active: index,
									active_fl: resIndex
								}
							}
						})
					})
				}
				if (el.jsId) {
					this.active_arr = this.arr.findIndex(res => {
						return res.id == el.jsId
					})
					this.active1 = 2
				}
			})
		},
		onHide() {
			console.log(999)
		},
		methods: {
			fn_disabled(v){
				return v.length==0?true:false
			},
			xuanzejishi(i) {
				if (this.zz_active_fl.active == null) {
					uni.showToast({
						title: '请先选择服务项目',
						icon: 'none'
					})
				} else {
					this.active_arr = i;
					this.active1 = 2;
					this.timeList(this.active_time)
				}
			},
			qiehuan() { //切换选择时间
				this.active1 = this.active_arr !== null ? 2 : 1
				if (this.active1 == 1) {
					uni.showToast({
						title: '请先选择技师',
						icon: 'none'
					})
				}
			},
			GetDateStr(AddDayCount, isY) { //计算时间
				var dd = new Date();
				dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
				var y = dd.getFullYear();
				var m = dd.getMonth() + 1; //获取当前月份的日期
				var d = dd.getDate();
				m = 10 > m ? `0${m}` : m
				d = 10 > d ? `0${d}` : d
				return isY ? y + "-" + m + "-" + d : m + "-" + d;
			},
			timeList(index) { //服务时间选择列表 
				this.$api.Service_timeList({
					id: this.active_arr !== null ? this.arr[this.active_arr].id : null,
					date: this.GetDateStr(index, true)
				}).then(res => {
					console.log(res.data.data)
					let ress = res.data.data
					this.item_list[index].afternoon_arr = ress.afternoon
					this.item_list[index].morning_arr = ress.morning
				})
			},
			serviceList() { //服务列表
				this.$api.Service_serviceList().then(res => {
					this.list = res.data.data
					console.log(res.data.data)
				})
			},
			technicianList() { //技师详情
				let obj = {
					service_id: this.zz_active_fl.active != null ? this.list[this.zz_active_fl.active].secondary[this
						.zz_active_fl.active_fl].id : null,
					date: this.time_active_obj.time_active,
					time: this.time_active_obj.time
				}
				this.$api.Service_technicianList(obj).then(res => {
					this.arr = res.data.data
				})
			},
			mobile_fn() { //门店拨打电话
				let that = this
				uni.showModal({
					title: '提示',
					content: `确认拨打${that.store_obj.name}电话`,
					success: function(res) {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: that.store_obj.mobile
							});
						}
					}
				});
			},
			store_true(v) { //门店弹框收起
			console.log(v)
				let that = this
				that.zz_store_obj = v
				that.$api.store_saveUsetStore({
					store_id: v.id
				}).then(res => {
					that.store()
				})
				uni.setStorage({
					key: 'store_dz',
					data:v,
					success: function() {
						that.active = null //当前选择
						that.active_fl = null //当前选择
						that.zz_active_fl = { //最终选中
							active: null,
							active_fl: null
						}
						that.active_arr = null, //技师选中下标
							that.active1 = 1 //当前选择-----1===技师，2===时间
						that.store_show = false
					}
				});
			},
			store_list_fn() { //门店搜索
				this.store_list = [];
				this.store_list_text = '加载中...'
				this.store_obj_api.page = 0;
				this.store_lists()
			},
			store_details_jump(id) {
				uni.navigateTo({
					url: `/store/Storedetails/Storedetails?id=${id}`
				})
			},
			store_lists() { //门店列表
				let that = this
				if (that.store_list_text == '无更多门店') return
				that.store_list_text = that.store_list.length == 0 ? '暂无门店' : '加载中...'
				that.store_obj_api.page++
				that.$api.store_list(that.store_obj_api).then(res => {
					that.store_list_text = res.data.data.length == 0 || res.data.data.length < 10 ? '无更多门店' :
						'加载更多...'
					res.data.data.length == 0 ? '' : that.store_list = that.store_list.concat(res.data.data)
				})
			},
			store() { //门店基本信息
				this.$api.store_storeBasic({
					lng: uni.getStorageSync('store')?.lng,
					lat: uni.getStorageSync('store')?.lat,
				}).then(res => {
					this.store_obj = res.data.data
					// this.store()
					this.serviceList()
					this.technicianList()
					this.timeList(this.active_time)
				})
			},
			item_fn_true() {
				if (this.zz_active_fl.active == null) {
					uni.showToast({
						title: '请选择服务类型',
						icon: 'none'
					})

				} else if (this.active_arr == null) {
					uni.showToast({
						title: '请选择服务技师',
						icon: 'none'
					})
					this.active1 = 1

				} else {
					
					// uni.navigateTo({
					// 	url: `/order/reservationOrder/reservationOrder?service_id=${/*服务id*/this.list[this.zz_active_fl.active].secondary[this.zz_active_fl.active_fl].id}&date=${/*时间*/this.GetDateStr(this.time_active_obj.time_active,true)} ${this.time_active_obj.time}&id=${/*技师id*/this.arr[this.active_arr].id}&id_name=${this.arr[this.active_arr].name}`
					// })
					// this.active = null
					// this.active_fl = null
					// this.zz_active_fl = { //最终选中
					// 	active: null,
					// 	active_fl: null
					// }
					// this.active_arr = null
					// this.active1 = 1
					// this.index = 0 //滑动选择的下标
					// this.order_arrayorder_array = null
					// this.time_active_obj = {
					// 	time_active: null, //最终选中的日期
					// 	time: null //最终选中的时间段
					// }
					// this.active_time = 0
				}
			},
			bindPickerChange(el) {
				console.log(el.detail.value)
				this.zz_active_fl = {
					active: this.active,
					active_fl: Number(el.detail.value)
				}
				this.active_fl = Number(el.detail.value)
				this.technicianList()
			},
			active_fl_fn(i, v) {
				if (v.secondary.length !== 0) {
					if (this.active === i) return
					this.active_fl = null
					this.active = i

				} else {
					uni.showToast({
						title: '该分类没有服务,请先购买服务',
						icon: 'none'
					})
				}
			},
			technician(id) {
				uni.navigateTo({
					url: '/order/technicianDetails/technicianDetails?id=' + id
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.location_message {
		height: 50px;
		padding: 0px 10px;
		background-color: #FFFFFF;
		border-top: 2px solid #F5F5F5;
		border-bottom: 2px solid #F5F5F5;

		.position {
			height: 40px;
			width: 70%;

			.position_text {
				margin-left: 5px;

				.position_text1 {
					font-size: 14px;
					color: #363636;
				}

				text {
					color: #888888;
					font-size: 12px;
				}
			}
		}

		.message_red {
			position: relative;

			view {
				position: absolute;
				right: -2px;
				top: -2px;
				width: 6px;
				height: 6px;
				background: #E8351E;
				border-radius: 50%;
			}
		}
	}

	.active {
		width: 325rpx;
		height: 35px;
		background: #EAEAEA;
		border-radius: 0px 14px 0px 14px;
		z-index: 99;

		text {
			color: #4B4B4B;
			font-size: 14px;
		}
	}

	.active3 {
		width: 325rpx;
		height: 35px;
		background: #EAEAEA;
		border-radius: 14px 0px 14px 0px;
		z-index: 99;

		text {
			color: #4B4B4B;
			font-size: 14px;
		}
	}

	.active2 {
		width: 325rpx;
		height: 45px;
		background: #FFFFFF;
		border-radius: 14px 14px 0px 14px;
		z-index: 99;

		text {
			font-size: 18px;
			color: #0F4C3A;
			font-weight: bold;
		}
	}

	.active1 {
		width: 325rpx;
		height: 45px;
		background: #FFFFFF;
		border-radius: 14px 14px 14px 0px;
		z-index: 99;

		text {
			font-size: 18px;
			color: #0F4C3A;
			font-weight: bold;
		}
	}

	.views_js {
		width: 300rpx;
		height: 170rpx;
		margin: 5rpx 0rpx;

		.views_js2 {
			width: 300rpx;
			height: 164rpx;
			border-radius: 5px;
			box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
		}

		.views_js_active {
			border: 2rpx solid #0F4C3A;
			border-radius: 5px;
		}
	}

	.active_time {
		width: 114px;
		height: 66px;
	}

	.active_time1 {
		border-bottom: 2px solid #0F4C3A;
		border-radius: 2px;
	}

	.title {
		height: 120rpx;
		width: 100%;

		view {
			height: 36rpx;
			width: 10rpx;
			border-radius: 5rpx;
			background-color: #45806E;
		}

		text {
			font-size: 28rpx;
			font-weight: bold;
			color: #272823;
			-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
			text-stroke: 1 rgba(0, 0, 0, 0);
			margin-left: 15rpx;
		}
	}

	.time_list {
		width: 100%;
		height: auto;
		flex-wrap: wrap;

		.time_list_view {
			border-radius: 8px;
			position: relative;
			border-style: solid;
			border-color: #CCCCCC;
			margin: 8rpx 0px;

			.is_time {
				position: absolute;
				right: 0;
				top: -13rpx;
				height: 26rpx;
				width: 52rpx;
				background-color: #EAEAEA;
				border-radius: 8rpx;

				text {
					font-size: 20rpx;
					color: #45806E;
				}
			}
		}
	}

	.bottom_gwc {
		position: fixed;
		bottom: env(safe-area-inset-bottom);
		left: 0rpx;
		width: 750rpx;
		height: 100px;
		background-color: #FFF;

		.bottom_gwcs {
			border-bottom: 1rpx solid rgba(255, 255, 255, 0.94);
			width: 750rpx;
			position: absolute;
			top: 0;
			left: 0;
			height: 50px;
		}

		.text1 {
			.time_text {
				font-size: 32rpx;
				font-weight: bold;
				color: #272823;
			}

			.sc_text {
				font-size: 24rpx;
				color: #3B3B3B;
				margin-left: 20rpx;
			}
		}

		.text_btn {
			width: 228rpx;
			height: 72rpx;
			background: #45806E;
			border-radius: 42rpx;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}

	.fl_view {
		position: absolute;
		left: -2rpx;
		width: 125px;
		background-color: #FFFFFF;
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
		z-index: 10000;
	}

	.zi_fl_active {
		width: 176rpx;
		height: 68rpx;
		background: #FFFFFF;
		border: 2rpx solid #CCCCCC;
		border-radius: 12rpx;

		text {
			font-size: 28rpx;
		}
	}
</style>
